<template>
  <div class="sys-main-content">
    <el-row>
      <el-col :span="24">
        <div class="col-content">
          <div class="head" :style="{ background: layoutStyle.backgroundColor }">
            <span>{{ timeInterval }}，</span>{{ userName }}<span>，祝你开心每一天！</span>
          </div>
          <div class="home-main">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>动态</span>
              </div>
              <div v-for="log in logList" :key="log.id" class="item">
                <el-avatar size="medium" :src="log.userHead"></el-avatar>&nbsp;&nbsp;
                <span>{{ log.userName }}</span>&nbsp;在&nbsp;<span>{{ log.createTime }}</span>&nbsp;{{ log.eventContent }}
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <live2d ref="live2d" />
  </div>
</template>

<script>
import { getLogList } from '@/api/log'
import { mapState } from 'vuex'
import Live2d from '@/components/Live2d.vue'
export default {
  name: 'Home',
  components: {
    Live2d
  },
  data() {
    return {
      logList: [],
      timeInterval: ''
    }
  },
  computed: {
    ...mapState('user', {
      userName: 'userName'
    }),
    ...mapState('layout', {
      layoutStyle: 'layoutStyle'
    })
  },
  created() {
    this.getLogList()
    this.getTimeInterval()
  },
  methods: {
    // 获取系统日志
    getLogList() {
      getLogList().then(res => {
        this.logList = res
      })
    },
    // 获得当前时间
    getTimeInterval() {
      const time = new Date().getHours()
      if (time < 9) this.timeInterval = '早上好'
      else if (time < 12) this.timeInterval = '上午好'
      else if (time < 14) this.timeInterval = '中午好'
      else if (time < 17) this.timeInterval = '下午好'
      else this.timeInterval = '晚上好'
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  // background: #26a6fe;
  height: 100px;
  line-height: 100px;
  padding-left: 20px;
}
.home-main {
  margin-top: 20px;
  .item {
    line-height: 50px;
    display: flex;
    align-items: center;
    span {
      color: #26a6fe;
    }
  }
}
.el-row {
  height: calc(100vh - 100px);
  .el-col {
    height: 100%;
  }
}
.col-content {
  height: calc(100vh - 100px)
}
</style>
